<style>
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .swiper {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .mySwiper2 {
        width: 100%;
    }

    .mySwiper2 .swiper-wrapper{
      overflow: hidden;
      position: absolute;
      display: flex;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      transition: transform 0ms ease 0s;
    }

    .mySwiper {
        box-sizing: border-box;
    }

    .mySwiper .swiper-slide {
        height: 100%;
    }

    .mySwiper .swiper-slide-thumb-active {
        opacity: 1;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
<div class="show-window">
    <div class="">
        {%- if section.settings.title != blank -%}
        <div
            class="title-wrapper-with-link title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
            <h2 class="title">
                {{ section.settings.title | escape }}
            </h2>
        </div>
        {%- endif -%}

        <div class="swiper mySwiper2" id="mySwiper2">
            <button id="modal_toggle" class="product-media-modal__toggle">{% render 'icon-close' %}</button>
            <div class="swiper-wrapper">
                {%- for block in section.blocks -%}
                <div class="swiper-slide" {{ block.shopify_attributes }}>

                    {%- if block.settings.image2 != blank -%}
                    <div class="card__image-wrapper">
                        <div class="deferred-media__poster media">
                            <img srcset="
                        {%- if block.settings.image2.width >= 375 -%}{{ block.settings.image2 | img_url: '375x' }} 375w,{%- endif -%}
                        {%- if block.settings.image2.width >= 460 -%}{{ block.settings.image2 | img_url: '460x' }} 460w,{%- endif -%}
                        {%- if block.settings.image2.width >= 640 -%}{{ block.settings.image2 | img_url: '640x' }} 640w,{%- endif -%}
                        {%- if block.settings.image2.width >= 710 -%}{{ block.settings.image2 | img_url: '710x' }} 710w,{%- endif -%}
                        {%- if block.settings.image2.width >= 1200 -%}{{ block.settings.image2 | img_url: '1200x' }} 1200w,{%- endif -%}
                        {%- if block.settings.image2.width >= 1260 -%}{{ block.settings.image2 | img_url: '1260x' }} 1260w,{%- endif -%}
                        {%- if block.settings.image2.width >= 1500 -%}{{ block.settings.image2 | img_url: '1500x' }} 1500w,{%- endif -%}
                        {%- if block.settings.image2.width >= 1920 -%}{{ block.settings.image2 | img_url: '1920x' }} 1920w,{%- endif -%}
                        {%- if block.settings.image2.width >= 2000 -%}{{ block.settings.image2 | img_url: '2000x' }} 2000w,{%- endif -%}
                        {%- if block.settings.image2.width >= 3000 -%}{{ block.settings.image2 | img_url: '3000x' }} 3000w,{%- endif -%}
                        {%- if block.settings.image2.width >= 3840 -%}{{ block.settings.image2 | img_url: '3840x' }} 3840w,{%- endif -%}
                        {{ block.settings.image2 | img_url: 'master' }} {{ block.settings.image2.width }}w"
                                data-src="{{ block.settings.image2 | img_url: '1500x' }}" 
                                class="lazyload"
                                sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}750px{% else %}550px{% endif %},(min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},calc(100vw - 30px)" alt="{{ block.settings.image2.alt }}"
                                height="{{ block.settings.image2.height }}" width="{{ block.settings.image2.width }}"
                                loading="lazy"
                                >
                        </div>
                    </div>
                    {%- endif -%}
                </div>
                {%- endfor -%}
            </div>
            <div class="swiper-button-next show_w"></div>
            <div class="swiper-button-prev show_w"></div>
            <div class="swiper-pagination"></div>
        </div>
        <div thumbsslider="" class="swiper mySwiper">
            <div class="swiper-wrapper swiper-father">
                {%- for block in section.blocks -%}
                <div class="show-slide swiper-slide" {{ block.shopify_attributes }}>

                    {%- if block.settings.image != blank -%}
                    <div class="card__image-wrapper">
                        <div class="deferred-media__poster media">
                            <img srcset=" {%- if block.settings.image.width >= 375 -%}{{ block.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                                          {%- if block.settings.image.width >= 470 -%}{{ block.settings.image | img_url: '470x' }} 470w,{%- endif -%}
                                          {%- if block.settings.image.width >= 640 -%}{{ block.settings.image | img_url: '640x' }} 640w,{%- endif -%}
                                          {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                                          {%- if block.settings.image.width >= 950 -%}{{ block.settings.image | img_url: '950x' }} 950w,{%- endif -%}
                                          {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
                                        {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                                        data-src="{{ block.settings.image | img_url: '500x' }}" 
                                        sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
                                          (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
                                        calc(100vw - 30px)" alt="{{ block.settings.image.alt }}"
                                class="lazyload"
                                height="{{ block.settings.image.height }}" width="{{ block.settings.image.width }}"
                                loading="lazy"
                               >
                        </div>
                    </div>
                    {%- endif -%}
                </div>
                {%- endfor -%}
            </div>
        </div>

    </div>
</div>


<script>
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 5,
        freeMode: true,
        watchSlidesProgress: true,
        on: {
            tap: function () {
                UpdataActive();
            },
        },
    });

    function UpdataActive() {
        jQuery('#mySwiper2').addClass('active');
    };
    var swiper2 = new Swiper(".mySwiper2", {
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next.show_w",
          prevEl: ".swiper-button-prev.show_w",
        },
        effect : 'fade',
        loop:true,
        thumbs: {
            swiper: swiper,
        },
    });
    $('#modal_toggle').click(function () {
        $(this).parent('#mySwiper2').removeClass('active')
    });
</script>


{% schema %}
{
"name": "Show window",
"class": "spaced-section spaced-section--full-width",
"tag": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Show window",
"label": "Headding"
}
],
"blocks": [
{
"type": "image",
"name": "image",
"settings": [
{
"type": "image_picker",
"id": "image2",
"label": "image2"
},
{
"type": "image_picker",
"id": "image",
"label": "image"
},
{
"type": "url",
"id": "cus_link",
"label": "Button link"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": false
}
]
}
],
"presets": [
{
"name": "Show window",
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}